﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FXCX.aspx.cs" Inherits="SkWeb.RiskDB.FXCX" %>
<%@ Register TagPrefix="fjx" Namespace="com.flajaxian" Assembly="com.flajaxian.FileUploader" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>风险数据库</title>
	<link href="../easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../easyui/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="../easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../easyui/jquery.easyui.min.js" type="text/javascript"></script>
   
    <style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
        
       .file-box{ position:relative;width:340px} 
       .txt{ height:22px; border:1px solid #cdcdcd; width:180px;} 
       .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;} 
       .file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px } 
        
  
        
    </style>
	<script type="text/javascript">
	    $(function () {
	        var lastIndex;
	        $('#tt').datagrid({

	            title: '构建风险数据库',
	            iconCls: 'icon-ok',
	            width: 700,
	            height: 550,
	            rownumbers: true,
	            animate: true,
	            collapsible: true,
	            fitColumns: true,
	            rownumbers: true,

	            url: 'Handler1.ashx',
	            idField: 'id',
	            columns: [[
                    { field: 'id', title: '序号', width: 120 },
                    { field: 'name', title: '井号', width: 120 },
                    { field: 'lng', title: '经度', width: 120 },
                    { field: 'lat', title: '纬度', width: 120 },
                    { field: 'jb', title: '井别', width: 120 },
                    { field: 'gy', title: '工艺', width: 120 },
                    { field: 'rank', title: '风险级别', width: 120,
                        formatter: function (value) {
                            if (value == -1) {
                                var s = '<div style="width:100%;background:#fff;border:1px solid #ccc">' + '待检测' + '</div>';
                                return s;
                            }
                            if (value) {
                                var s = '<div style="width:100%;background:#0ff;border:1px solid #ccc">' +
						    			'<div style="width:' + (4 - value) * 33.33 + '%;background:red">' + value + '级' + '</div>'
                                '</div>';
                                return s;
                            } else {
                                var s = '<div style="width:100%;background:#0ff;border:1px solid #ccc">' + '无风险' + '</div>';
                                return s;
                            }
                        }
                    },
                ]],

	            singleSelect: true, //是否单选
	            pageSize: 10,
	            pagination: true,

	            toolbar: [{
	                text: '添加',
	                iconCls: 'icon-add',
	                handler: function () {
	                    $("tt").datagrid("selectRow", 1);
	                    $('#dlg').dialog('open').dialog('setTitle', '添加新记录');
	                    $('#fm').form('clear');

	                }
	            }, '-', {
	                text: '修改',
	                iconCls: 'icon-edit',
	                handler: function () {
	                    var row = $('#tt').datagrid('getSelected');
	                    if (row) {
	                        editInfo(row);
	                    }
	                }
	            }, '-', {
	                text: '删除',
	                iconCls: 'icon-remove',
	                handler: function () {
	                    destroyInfo();
	                }
	            }, '-', {
	                text: '上传Excel',
	                iconCls: 'icon-up',
	                handler: function () {
	                    $('#Div_upload').dialog('open').dialog('setTitle', '上传Excel文件');
	                }
	            },'-', {
	                text: '开始识别',
	                iconCls: 'icon-blank',
	                handler: function () {
	                    $.ajax({
                        url: "Handler.ashx?op=identification",
                        type: "post",
                        data: '',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                // Play with returned data in JSON format
                alter('识别完成！');
            },
            error: function (msg) {
                alert('识别完成！');
            }
        });
	                }
	            }],
	            onBeforeLoad: function () {
	                $(this).datagrid('rejectChanges');
	            },
	            onLoadSuccess: function (data) {
	                var rows = $("#tt").datagrid("getRows");
	                if (rows.length > 0) {
	                    var row = rows[0];
	                    var scale = document.getElementById('sel_scale').value;
	                    $("#frame").attr("src", "ImgDisp.aspx?id=" + row.id + "&scale=" + scale)
	                }
	                $("tt").datagrid("selectRow", 1);
	            },
	            onClickRow: function (rowIndex) {
	                if (lastIndex != rowIndex) {
	                    $('#tt').datagrid('endEdit', lastIndex);
	                    $('#tt').datagrid('beginEdit', rowIndex);

	                    var row = $('#tt').datagrid("getSelected");
	                    var scale = $('#sel_scale').combobox('getValue'); //document.getElementById('sel_scale').value;
	                    var type = $('#sel_mapType').combobox('getValue'); //document.getElementById('sel_mapType').value;
	                    var strJh = row.name;
	                    $("#frame").attr("src", "ImgDisp.aspx?id=" + row.id + "&scale=" + scale + "&map_type=" + type+"&jh="+strJh)

	                }
	                lastIndex = rowIndex;
	            }
	        });
	    });

	    function destroyInfo() {
	        var row = $('#tt').datagrid('getSelected');
	        if (row) {
	            $.messager.confirm('Confirm', '确定要删除当前记录吗?', function (r) {
	                if (r) {
	                    $.post('FormAction.aspx?Action=delete&id='+row.id, { id: row.id }, function (result) {
	                        if (result.success) {
	                            $('#tt').datagrid('reload');    // reload the user data
	                        } else {
	                            $.messager.show({    // show error message
	                                title: 'Error',
	                                msg: result.errorMsg
	                            });
	                        }
	                    }, 'json');
	                }
	            });
	        }
	    }


	    function editInfo(obj) {
	        var row = obj;
	        if (row) {
	            $('#dlg').dialog('open').dialog('setTitle', '修改井数据');
	            $('#fm').form('load', row);
	           // url = 'FormAction.aspx?action=update&id=' + row.id;
	        }
	    }
        //有更新和添加新数据两种情况
	    function saveInfo() {
	        var url_tmp = "FormAction.aspx?action=add"; 
	        if ($('#dlg').panel('options').title == "修改井数据") {
	            var row = $('#tt').datagrid('getSelected');
	            url_tmp = "FormAction.aspx?action=update&id=" + row.id;
            }
	
            $('#fm').form('submit', {
	            url: url_tmp,
	            onSubmit: function () {
	                return $(this).form('validate');
	            },
	            success: function (result) {
	                result = eval('(' + result + ')');
	                if (!result.success) {
	                    $.messager.show({
	                        title: 'Error',
	                        msg: result.msg
	                    });
	                } else {
	                    $('#dlg').dialog('close');        // close the dialog
	                    $('#tt').datagrid('reload');    // reload the user data
	                }
	            }
	        });
	    }
	   
	</script>

   
</head>
<body>

   
   <div id="mm" >
   </div>
    <div style=" float:left">
    <table id="tt" >
	
	</table>
    </div>

   

     <div style=" float:left; margin:0px 10px; width:400px; height:350px">
     
   <%-- <div class="file-box"> 
    <form action="" method="post" enctype="multipart/form-data"> 
    <input type='text' name='textfield' id='textfield' class='txt' /> 
    <input type='button' class='btn' value='浏览...' /> 
    <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" /> 
    <input type="submit" name="submit" class="btn" value="上传" /> 
    </form> 
    </div> 
    <br />--%>

     <div id="Div_upload" class="easyui-dialog" style="width:350px;height:140px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
    <form runat="server" style="vertical-align:middle">
    <fjx:FileUploader ID="FileUploader1" runat="server" AllowedFileTypes="Excel Documents:*.xls" >
    <Adapters>
        <fjx:FileSaverAdapter Runat="server" FolderName="../FileUpLoad" />
    </Adapters>
    </fjx:FileUploader>
    </form>
    </div>
   


     缩放级别：
     <select id='sel_scale' class="easyui-combobox" style="width:50px;"  data-options="panelHeight:'auto'">
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12" selected="selected">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
     </select>
     地图类型：
     <select id='sel_mapType' class="easyui-combobox" style="width:100px;" data-options="panelHeight:'auto'">
        <option value="roadmap" selected="selected">地图</option>
        <option value="satellite">卫星</option>
        <option value="terrain">地形</option>
        <option value="hybrid ">合成</option>
     </select>
     <iframe id="frame"  scrolling="no" width="100%" height="100%" >
     </iframe>
    </div>
     <div id="dlg" class="easyui-dialog" style="width:400px;height:340px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <div class="ftitle">井信息</div>
        <form id="fm" method="post"   novalidate>
            <div class="fitem">
                <label>井名:</label>
                <input name="name" class="easyui-validatebox" required="true"/>
            </div>
            <div class="fitem">
                <label>经度:</label>
                <input name="lng" class="easyui-validatebox easyui-numberbox" data-options="min:0,precision:4" required="true"/>
            </div>
            <div class="fitem">
                <label>纬度:</label>
                <input name="lat" class="easyui-validatebox easyui-numberbox" data-options="min:0,precision:4" required="true"/>
            </div>
            <div class="fitem">
                <label>井别:</label>
                <select name="jb" style=" width:55%">
                  <option value ="水平井">水平井</option>
                  <option value ="气井">气井</option>
                  <option value="超深井">超深井</option>
                  <option value="探井">探井</option>
                  <option value ="大斜度井">大斜度井</option>
                  <option value ="评价井">评价井</option>
                  <option value="深井">深井</option>
                  <option value="常规油、水井">常规油、水井</option>
                </select>
            </div>

             <div class="fitem">
                <label>工艺:</label>
                <select name="gy"  style=" width:55%">
                  <option value ="水力喷射">水力喷射</option>
                  <option value ="管输射孔下泵联作">管输射孔下泵联作</option>
                  <option value="电缆射孔井">电缆射孔井</option>
                
                </select>
            
            </div>
        </form>
    </div>
   <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveInfo()">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>


</body>
</html>
